<template>
<div>

  <!--表格-->
  <x-table
      style="height: calc(100% - 178px)"
      :minusPart="300"
      class="mt-2"
      :tableColumnConfig="tableColumnConfig"
      :tableData="tableGlobalMixinData"
      :tableConfig="tableConfigMixins"
  ></x-table>


  <!--data  方便直接粘贴-->
  tableColumnConfig : [
  {
    label: "ID",
    prop: 'dddd',
  },
  {
    label: "操作",
    alignStyle:'text-align:center',
    template: [
    {
      text: "查看详情",
      type: "link",
      method: "gotoPage",
      addParams: 1,
    },
    {
      text: "审核",
      type: "link",
      disabled: ({ row, route }) => row.a === 1,
      method: "gotoPage",
      addParams: 2,
      showItem: ({row}) => row.a === 2
    }

  ]

</div>
</template>

<script>
export default {
  name: "XTable",
  /**
   * label  number  列名
   * width  number  列宽
   * minWidth  number  最小列宽
   * prop   string  列绑定字段
   * align  string  列内排序方式  默认 left
   * headerAlign  string  列头排序方式 默认 left
   * fixed  string  列的定位布局
   * template  array  template绑定数组
   * children  array  开启多级表头的数组
   * -----template-----
   *    type  string  组件名 目前支持 btn input icon link
   *    assemblyType  string  组件样式 默认 primary
   *    disabled  boolean  是否禁用  默认 false
   *    placeholder  string  input输入框的提示句  默认  请输入
   *    addParams  any  触发事件后加入事件的参数传出
   *    method  string  除了input是blur触发外 其他都是点击触发  默认触发函数是 defaultMethod 请在父元素接收
   *    disabled function 接受两个入参 该行的所有对象 + 当前路由的route 例子如 disabled: ({ row, route }) => row.a === 1,
   *    text string  link和button内显示的文字
   *    !注意  input默认绑定的是父级的prop
   *
   */
  data() {
    return {
      // 表格列字段配置
      tableColumnConfig : [
        {
          label: "ID",
          prop: 'dddd',
        },
        {
          label: "XXX",
          children: [
            {
              label: "222",
              prop: "c",
              template: [
                {
                  type: "input",
                  prop: "c",
                  method: "showSomeThing",
                },
              ],
            },
            {
              label: "111",
              prop: "a",
              template: [
                {
                  type: "button",
                  text: "c",
                  method: "showSomeThing",
                },
                {
                  type: "link",
                  text: "c",
                  method: "showSomeThing",
                },
              ],
            },
          ],
        },
        {
          label: "操作",
          alignStyle:'text-align:center',
    template: [
      {
        text: "查看详情",
        type: "link",
        method: "gotoPage",
        addParams: 1,
      },
      {
        text: "审核",
        type: "link",
        disabled: ({ row, route }) => row.a === 1,
        method: "gotoPage",
        addParams: 2,
        showItem: ({row}) => row.a === 2,},
    ],
  },
  ],
      // 表格功能配置
      tableConfigMixins:[
        {
          index: false, //是否需要index列
          indexWidth: 60, //index列宽
          indexLabel: "序号", //index列label
          indexFixed: "left", //index列是否开启fixed布局，如写则开启
          selection: false, //是否需要多选列
          selectionWidth: 60, //多选列宽
          selectionFixed: "left", //index列是否开启fixed布局，如写则开启
        },
      ],
      tableGlobalMixinData:[]

    }
  },
}
</script>

<style scoped>

</style>

